<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        #authorityGroupManage .el-dialog__body {
            /*height: 30vh;*/
            overflow: auto;
        }

        #authorityGroupManage .el-checkbox__input > .el-checkbox__inner {
            display: block !important;
        }

        .el-checkbox + .el-checkbox {
            margin-left: 0px;
        }

        .el-checkbox {
            margin-right: 25px;
        }
    </style>
</head>
<body>
<div id="authorityGroupManage" class="center_div" style="display:none;">
    <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
        <template>
            权限组：
            <el-input v-model="name" size="mini" style="width: 10%"></el-input>
        </template>
        <el-button type="primary" size="mini" @click="query">查询</el-button>
        <el-button type="primary" size="mini" @click="add">添加</el-button>
    </div>
    <div class="table-wrap" style="margin-left: 1%">
        <el-table
                :data="tableData"
                style="width:100%;text-align: center;border-left:1px solid #EBEBEB"
                header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB;border-left:none"
                cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB;border-top:none;border-left:none">
          <!--  <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>-->
            <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
            </el-table-column>
            <template v-if="buttons && buttons.length!==0">
                <el-table-column
                        class="align-right"
                        width="230px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-for="button in buttons"
                                   @click="operate(scope.row,button.href)" :type="button.type"
                                   class="el-button el-button--text el-button--medium">{{button.label}}
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
                layout="prev, pager, next"
                @current-change="changePageNum"
                :current-page="pageNum"

                :total="total">
        </el-pagination>
    </div>
    <div>
        <el-dialog :title="title"
                   @close="closeDialog"
                   :visible.sync="showBox"
                   width="30%"
                   append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="权限组"  prop="name">
                            <el-input v-model="form.name" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述" prop="remark">
                            <el-input v-model="form.remark" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <span style="margin-left: 30%;font-size: 16px">一级菜单</span>
                </el-row>
                </br>
                <el-row>
                    <el-checkbox-group v-model="checkedMenuOptions" @change="handleCheckedChange">
                        <el-checkbox v-for="item in menuOptions" :label="item.index" :value="item.index"
                                     style="width: 120px">{{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-row>
                <el-row>
                    <span style="margin-left: 30%;font-size: 16px">语音业务</span>
                </el-row>
                <br/>
                <el-row>
                    <el-checkbox-group v-model="checkedVoiceOptions" @change="handleCheckedChange">
                        <el-checkbox v-for="item in voiceOptions" :label="item.index" :value="item.index"
                                     style="width: 120px">
                            {{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-row>
                <el-row>
                    <span style="margin-left: 30%;font-size: 16px">地图调度</span>
                </el-row>
                <br/>
                <el-row>
                    <el-checkbox-group v-model="checkedMapOptions" @change="handleCheckedChange">
                        <el-checkbox v-for="item in mapOptions" :label="item.index" :value="item.index"
                                     style="width: 120px">
                            {{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-row>
                <el-row>
                    <span style="margin-left: 30%;font-size: 16px">会议业务</span>
                </el-row>
                <br/>
                <el-row>
                    <el-checkbox-group v-model="checkedMeetingOptions" @change="handleCheckedChange">
                        <el-checkbox v-for="item in meetingOptions" :label="item.index" :value="item.index"
                                     style="width: 120px">
                            {{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-row>
                <el-row>
                    <span style="margin-left: 30%;font-size: 16px">数据统计</span>
                </el-row>
                <br/>
                <el-row>
                    <el-checkbox-group v-model="checkedDataOptions" @change="handleCheckedChange">
                        <el-checkbox v-for="item in dataOptions" :label="item.index" :value="item.index"
                                     style="width: 120px">
                            {{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showBox = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="dialogComfirm" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    VueComponent.createAuthorityGroupManage = function () {
        if (window.authorityGroupManageVue) {
            return;
        }
        window.authorityGroupManageVue = new Vue({
            el: "#authorityGroupManage",
            data: {
                name: '',
                tableTitle: [
                    {label: '权限组', prop: 'name'},
                    {label: '描述', prop: 'remark'}
                ],
                rules: {
                    name: [
                        {required: true, message: '请输入权限组名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],remark: [
                        {required: false, message: '请输入描述', trigger: 'blur'},
                        {min: 1, max: 128, message: '长度不能超过128个字符', trigger: 'blur'}
                    ],
                },
                tableData: [],
                total: 0,
                type: 0,
                pageNum: 1,
                pageSize: 15,
                actualTotal: 15,
                buttons: [{label: "编辑", href: "update"}, {label: "删除", href: "delete"}],
                showBox: false,
                title: '',
                form: {
                    id: '',
                    name: '',
                    remark: '',
                    license: 0,
                },
                checkedIndex: [],
                totalCheckOptions: [],
                authorityOptions: [],
                checkedMenuOptions: [],
                menuOptions: [],
                checkedVoiceOptions: [],
                voiceOptions: [],
                checkedMapOptions: [],
                mapOptions: [],
                checkedMeetingOptions: [],
                meetingOptions: [],
                checkedDataOptions: [],
                dataOptions: [],
            },
            mounted: function () {
                this.query();
                this.queryLicense();
            },
            methods: {
                handleCheckedChange: function (index) {

                },
                closeDialog(){
                    this.checkedMenuOptions = [];
                    this.checkedVoiceOptions = [];
                    this.checkedMenuOptions = [];
                    this.checkedVoiceOptions = [];
                    this.checkedMapOptions = [];
                    this.checkedMeetingOptions = [];
                    this.checkedDataOptions = [];
                    this.$nextTick(function () {
                        this.$refs["form"].resetFields();
                    });
                },
                //对checkbox进行分组
                funCheckGroup(){
                    this.menuOptions = [];
                    this.voiceOptions = [];
                    this.mapOptions = [];
                    this.meetingOptions = [];
                    this.dataOptions = [];
                    // index  0-5为 一级菜单
                    for (var i = 0; i < this.totalCheckOptions.length; i++) {
                        if (1 <= this.totalCheckOptions[i].id && this.totalCheckOptions[i].id <= 6) {
                            this.menuOptions.add(this.totalCheckOptions[i]);
                        } else if ([6, 7, 8, 9, 67, 68, 69, 71, 72].indexOf(this.totalCheckOptions[i].id) > -1) {
                            this.voiceOptions.add(this.totalCheckOptions[i]);
                        }
                        else if ([10, 11, 12].indexOf(this.totalCheckOptions[i].id) > -1) {
                            this.mapOptions.add(this.totalCheckOptions[i]);
                        }
                        else if ([13, 14].indexOf(this.totalCheckOptions[i].id) > -1) {
                            this.meetingOptions.add(this.totalCheckOptions[i]);
                        } else {
                            this.dataOptions.add(this.totalCheckOptions[i]);

                        }
                    }


                },
                funCheckedGroup(checkedLisense){

                    this.checkedMenuOptions = [];
                    this.checkedVoiceOptions = [];
                    this.checkedMapOptions = [];
                    this.checkedmeetingOptions = [];
                    this.checkeddataOptions = [];
                    // index  0-5为 一级菜单
                    for (var i = 0; i < checkedLisense.length; i++) {
                        if (1 <= checkedLisense[i].id && checkedLisense[i].id <= 6) {
                            this.checkedMenuOptions.add(checkedLisense[i].index);
                        } else if ([6, 7, 8, 9, 67, 68, 69, 71, 72].indexOf(checkedLisense[i].id) > -1) {
                            this.checkedVoiceOptions.add(checkedLisense[i].index);
                        }
                        else if ([10, 11, 12].indexOf(checkedLisense[i].id) > -1) {
                            this.checkedMapOptions.add(checkedLisense[i].index);
                        }
                        else if ([13, 14].indexOf(checkedLisense[i].id) > -1) {
                            this.checkedmeetingOptions.add(checkedLisense[i].index);
                        } else {
                            this.checkeddataOptions.add(checkedLisense[i].index);

                        }
                    }
                    this.showBox = true;
                    this.$nextTick(function () {
                        $('.el-checkbox__inner').css('display', 'block');
                    })

                },
                queryLicense(){
                    console.info("queryLicense");
                    var data = {
                        fleetId: window.fleetId,

                    };
                    axios.post('/scs/fleet/queryUserLicense', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.totalCheckOptions = data.obj.list;
                                    this.actualTotal = data.obj.actualTotal;
                                    this.funCheckGroup();
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                formClear: function () {
                    this.form.id = '';
                    this.form.name = '';
                    this.form.remark = '';
                    this.form.function = 0;
                    this.form.data = 0;
                    this.checkedMenuOptions = [];
                    this.checkedVoiceOptions = [];
                    this.checkedMenuOptions = [];
                    this.checkedVoiceOptions = [];
                    this.checkedMapOptions = [];
                    this.checkedMeetingOptions = [];
                    this.checkedDataOptions = [];
                },
                query: function () {
                    this.queryLicense();
                    var data = {
                        name: this.name || '',
                        fleetId: window.fleetId,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    };
                    axios.post('/scs/authorityGroupManage/getAuthorityGroup', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.tableData = data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                getAuthorityOptions: function () {
                    axios.post('/scs/authorityGroupManage/getAuthorityOptions', {})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.authorityOptions = data.obj.list;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                add: function () {
                    var that = this;
                    that.formClear();
                    that.type = 1;
                    that.title = "添加权限组";
                    that.showBox = true;

                    this.$nextTick(function () {
                        $('.el-checkbox__inner').css('display', 'block');
                    })
                },
                dialogComfirm: function () {
                    var validate = false;
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            validate = true;
                        } else {
                            console.log('error submit!!');
                            validate = false;
                            return false;
                        }
                    });
                    if (validate === false) {
                        return;
                    }
                    console.info("dialogComfirm");
                    var that = this;
                    var license = '';
                    for (var i = 0; i < that.actualTotal; i++) {
                        license = '0' + license;
                    }
                    for (var i = 0; i < that.checkedMenuOptions.length; i++) {
                        license = license.substr(0, that.checkedMenuOptions[i]) + '1' + license.substr(that.checkedMenuOptions[i] + 1);
                    }
                    for (var i = 0; i < that.checkedVoiceOptions.length; i++) {
                        license = license.substr(0, that.checkedVoiceOptions[i]) + '1' + license.substr(that.checkedVoiceOptions[i] + 1);

                    }
                    for (var i = 0; i < that.checkedMapOptions.length; i++) {
                        license = license.substr(0, that.checkedMapOptions[i]) + '1' + license.substr(that.checkedMapOptions[i] + 1);

                    }
                    for (var i = 0; i < that.checkedMeetingOptions.length; i++) {
                        license = license.substr(0, that.checkedMeetingOptions[i]) + '1' + license.substr(that.checkedMeetingOptions[i] + 1);

                    }
                    for (var i = 0; i < that.checkedDataOptions.length; i++) {
                        license = license.substr(0, that.checkedDataOptions[i]) + '1' + license.substr(that.checkedDataOptions[i] + 1);

                    }
                    //转化为十进制传到后台
                    var licenseNum = parseInt(license, 2);


                    //0 -编辑 1-添加
                    if (that.type === 0) {
                        var data = {
                            id: that.form.id,
                            name: that.form.name,
                            remark: that.form.remark,
                            license: licenseNum,
                        };
                        axios.post('/scs/authorityGroupManage/updateAuthorityGroup', data)
                            .then(function (res) {
                                var res = res.data;
                                if (res.success) {

                                    that.closeBox();
                                    that.$message('编辑成功');
                                    that.query();

                                } else {
                                    that.$message(res.msg);
                                }
                            })
                            .catch(function (err) {
                                console.log(err);
                            });
                    } else {


                        var data = {
                            name: that.form.name,
                            remark: that.form.remark,
                            fleetId: window.fleetId,
                            license: licenseNum,
                        };
                        axios.post('/scs/authorityGroupManage/addAuthorityGroup', data)
                            .then(function (res) {
                                var res = res.data;
                                if (res.success) {
                                    that.closeBox();
                                    that.$message('添加成功');
                                    that.query();

                                } else {
                                    that.$message('添加失败:' + res.obj.msg);
                                }
                            })
                            .catch(function (err) {
                                console.log(err);
                            });
                    }

                },

                closeBox: function () {
                    this.formClear();
                    this.showBox = false;
                },
                queryGroupLicense(id){
                    var that = this;
                    axios.post('/scs/authorityGroupManage/queryPossessLicense', {
                        id: id,
                        fleetId: window.fleetId
                    })
                        .then(function (res) {
                            var res = res.data;
                            if (res.success) {
                                var license = res.obj;
                                that.funCheckedGroup(license);
                            }
                        })
                        .catch(function (err) {
                            console.warn(err);
                        });
                },

                operate: function (row, href) {
                    var that = this;
                    that.formClear();
                    if (href.indexOf('update') !== -1) {
                        that.type = 0;
                        that.title = "编辑";
                        that.form.id = row.id;
                        that.form.name = row.name;
                        that.form.remark = row.remark;
                        that.queryGroupLicense(row.id);

                    } else if (href.indexOf('delete') !== -1) {
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios.post('/scs/authorityGroupManage/deleteAuthorityGroup', {id: row.id})
                                .then(function (res) {
                                    var res = res.data;
                                    if (res.success) {
                                        that.$message('删除成功');
                                        //此时已经实现删除操作，所以total的值需要减1，Math.ceil是向上取整，保证始终大于等于1
                                        const totalPage = Math.ceil((that.total - 1) / that.pageSize);
                                        //记住删除最后一条数据时当前码是最后一页
                                        const tempPageNum = that.pageNum > totalPage ? totalPage : that.pageNum;
                                        //实现跳转
                                        that.pageNum = tempPageNum < 1 ? 1 : tempPageNum;
                                        that.query();
                                    }
                                })
                                .catch(function (err) {
                                    console.warn(err);
                                });
                        });
                    } else {
                    }
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
